<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-17 18:53:00
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-17 20:32:27
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            margin:20px 10px 0 0;
        }
        .clear_fixed::after{
            content: "";
            height: 0;
            overflow: hidden;
            clear: both;
            visibility: hidden;
            display: block;
        }
        .mobile{
            margin-top: 20px;
            margin-left: 100px;
            min-height: 300px;
           
            width: fit-content;
        }
        .mobile_list{
            width: 220px;
            margin-right:61px;
            margin-top: 5px;
            border: 1px solid #333333;
            float: left;
            height: 330px;
            
        }
        .mobile_list img{
            width: 220px;
            height: 180px;
        }
        .mobile_list p:nth-of-type(1){
            font-weight: bold;
        }
        .mobile_list p{
            margin-top: 3px;
        }
        .mobile_list p:nth-of-type(4) span{
            color: red;
        }
    </style>
</head>
<body>
    <h2>根据数据生成一个商品列表</h2>
    <button id="btn1">根据价格升序</button>
    <button id="btn2">根据销量排序</button>
    <button id="btn3">根据评价排序</button>
    <div class="mobile clear_fixed " id="mobile">
        <!-- <div class="mobile_list ">
           <img src="./images/ip7.jpg" alt="">
           <p>iphone7 plugs</p>
           <p>颜色: 土豪金</p>
           <p>原价:<del>9999</del></p>
           <p>现价:<span>¥5888.0</span></p>
        </div>
       
        <div class="mobile_list ">
            <img src="./images/ip7.jpg" alt="">
            <p>iphone7 plugs</p>
            <p>颜色: 土豪金</p>
            <p>原价:<del>9999</del></p>
            <p>现价:<span>¥5888.0</span></p>
         </div>

         <div class="mobile_list ">
            <img src="./images/ip7.jpg" alt="">
            <p>iphone7 plugs</p>
            <p>颜色: 土豪金</p>
            <p>原价:<del>9999</del></p>
            <p>现价:<span>¥5888.0</span></p>
         </div> -->
    </div>
    <script>
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: './images/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: './images/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: './images/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: './images/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: './images/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: './images/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: './images/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: './images/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: './images/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: './images/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: './images/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: './images/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];
   /*   <div class="mobile clear_fixed " id="mobile">
    <div class="mobile_list ">
           <img src="./images/ip7.jpg" alt="">
           <p>iphone7 plugs</p>
           <p>颜色: 土豪金</p>
           <p>原价:<del>9999</del></p>
           <p>现价:<span>¥5888.0</span></p>
           <p>销量</p>
           
        </div> */
        function show(data){
            mobile.innerHTML=" ";
            for(var i=0;i<data.length;i++){
            mobile.innerHTML+="<div class='mobile_list'>"+
            "<img src='"+data[i].imgurl+"' alt=''>"+
            "<p>"+data[i].name+"</p>"+
            "<p>颜色:"+data[i].color+"</p>"+
            "<p>原价:"+"<del>"+data[i].price+"</del>"+"</p>"+
            "<p>现价:"+"<span>¥"+data[i].sale+"</span>"+"</p>"+
            "<p>销量:"+data[i].sales+"</p>"+
            "<p>评论数:"+data[i].evaluate+"</p>"+"</div>"
        }
        }
        show(data);
        var btn = document.getElementsByTagName("button");
        for(i=0;i<btn.length;i++){
            btn[i].index=i;
            btn[i].onclick =function(){
                if(this.index===0){
                data.sort(function(a,b){
               return a.sale-b.sale;
            })}
            if(this.index===1){
                data.sort(function(a,b){
               return b.sales-a.sales;
            })}
            if(this.index===2){
                data.sort(function(a,b){
               return b.evaluate-a.evaluate;
            })}
           show(data); 
            }
        }
       
    </script>
</body>
</html>